<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" class="form-control" name="row[name]" type="text" value="{$row.name|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Admin_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-admin_id" data-source="auth/admin/selectpage" data-field="nickname" data-params='{"custom[status]":"normal"}' class="form-control selectpage mw150" name="row[admin_id]" type="text" value="{$row.admin_id|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Address')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class='control-relative'>
                <input id="c-address" class="form-control" data-toggle="city-picker" data-responsive="true" name="row[address]" type="text" value="{$row.address|htmlentities}" placeholder="{:__('Address')}" />
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
        <div class="col-xs-12 col-sm-8">

            <div class="radio">
                {foreach name="statusList" item="vo"}
                <label for="row[status]-{$key}"><input id="row[status]-{$key}" name="row[status]" type="radio" value="{$key}" {in name="key" value="$row.status"}checked{/in} /> {$vo}</label>
                {/foreach}
            </div>

        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Locations')}:</label>
        <div class="col-xs-12 col-sm-8" style="position: relative;">
            <div id="container" style="width: 100%;height: 100%;"></div>
            <div id="toolControl"></div>
            <div style="font-size: 12px;">
                1、结束绘制：鼠标左键双击即可结束绘制折线、多边形、多边形会自动闭合；<br>
                2、系统只保留最新勾选，如想覆盖前一个，从新勾选即可。<br>
            </div>
            <textarea class="form-control hide" id="locations" name="row[locations]">{$row.location|json_encode}</textarea>
        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
<script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script type="text/javascript">
    var map; // 地图
    var editor; // 编辑器
    var activeType = 'polygon'; // 激活的图形编辑类型

    // 切换激活图层
    document.getElementById('toolControl').addEventListener('click', (e) => {
        var id = e.target.id;
        if (id !== 'toolControl') {
            document.getElementById(activeType).className = 'toolItem';
            document.getElementById(id).className = 'toolItem active';
            activeType = id;
            editor.setActiveOverlay(id);
        }
    });

    var locations = JSON.parse('{:json_encode(isset($row["location"])?$row["location"]:[])}');
    var paths = [];
    for (let i of locations) {
        paths.push(new TMap.LatLng(i.lat, i.lng));
    }

    initMap();
    function initMap() {
        map = new TMap.Map('container', {
            zoom: 12, // 设置地图缩放级别
            center: new TMap.LatLng('{$center_lat}', '{$center_lng}') // 设置地图中心点坐标
        });

        var overlay = {
            map: map
        };

        if (paths.length) {
            overlay.geometries = [
                {
                    paths: paths,
                    content: '{$row.name}'
                }
            ];
        }

        // 初始化几何图形及编辑器
        editor = new TMap.tools.GeometryEditor({
            // TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
            map: map, // 编辑器绑定的地图对象
            overlayList: [
                // 可编辑图层 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4
                {
                    overlay: new TMap.MultiPolygon(overlay),
                    id: 'polygon',
                }
            ],
            actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
            activeOverlayId: 'polygon', // 激活图层
            selectable: true,
            snappable: true, // 开启吸附
        });

        // 监听绘制结束事件，获取绘制几何图形
        editor.on('draw_complete', (geometry) => {
            console.log('几何图形坐标', geometry);
            document.querySelector('textarea[name="row[locations]"]').value = JSON.stringify(geometry.paths);
        });
    }
</script>